<mat-list-item class="container"
[@item]='widerPriority'
 [ngClass]="{
    'priority-normal': item.priority === 1,
    'priority-important': item.priority === 2,
    'priority-emergency': item.priority === 3
}"
[app-Draggable]="true"
[dragTag]="'task-item'"
[draggedCalss]="'drag-start'"
[dragData]='item'
(click)="onItemClick()"
>
    <mat-checkbox 
    class="status" 
    [checked]="item.completed"
    (click)="onCheckBoxClick($event)"
    ></mat-checkbox>
    <div mat-line class="content" [ngClass]="{'completed': item.completed}" [matTooltip]="item.desc">
        {{item.desc}}</div>
    <div mat-line class="bottom-bar">
        <span class="due-date" *ngIf="item.dueDate">
            {{item.dueDate | date:'yy-mm-dd'}}
        </span>
        <mat-icon *ngIf="item.reminder">alarm</mat-icon>
    </div>
    <mat-icon class="avatar" [svgIcon]="avatar"></mat-icon>
</mat-list-item>